<template>
    <div class="your-like">
        <navHeader title="猜你喜欢" englishTitle="Guess You Like It"></navHeader>
        <div class="good-show">
            <div @click="viewDetail" class="img-wrapper" v-for="(item, index) in imgs" :key="index" >
                <img class="good-pic" :src="item.url" alt="">
                <div class="title">{{item.title}}</div>
                <div class="price">￥{{item.price}}</div>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
/**
* descripe:分类精选
* date: 2019-
* author: yezhanxiang
*/
import navHeader from './nav-header';
  export default {
    data () {
      return {
          imgs: [
          {
            title: '古黛妃 短袖t恤女夏装2019新款韩版宽松',
            url: require("../assets/static/temp/show1.jpg"),
            price: 456
          }, {
            title: '潘歌针织连衣裙',
            url: require("../assets/static/temp/show2.jpg"),
            price: 354
          }, {
            title: '巧谷2019春夏季新品新款女装',
            url: require("../assets/static/temp/show3.jpg"),
            price: 645
          }, {
            title: '私萱连衣裙',
            url: require("../assets/static/temp/show4.jpg"),
            price: 995
          }, {
            title: '原宿风学生潮韩版春夏短',
            url: require("../assets/static/temp/show5.jpg"),
            price: 753
          }, {
            title: '潘歌针织连衣裙',
            url: require("../assets/static/temp/show2.jpg"),
            price: 354
          }
        ]
      }
    },
    components: {
        navHeader
    },
    created () {

    },
    methods: {
      viewDetail () {
        this.$emit('viewDetail');
      }
    }
  }
</script>

<style scoped lang="stylus">
.your-like
  background-color #fff
  margin-top .2rem
  padding 0 0.2rem
  .good-show
    width 100%
    display flex
    flex-flow wrap
    .img-wrapper
      width 48%
      .good-pic
        width 100%
        height 3.3rem
      &:nth-child(2n-1)
        margin-right 4%
			.title
				margin-top .1rem
				font-size: .32rem
				color #303133
				text-align left 
				line-height .8rem
				width 100%
				overflow hidden
				white-space nowrap
				text-overflow ellipsis
			.price
				width 100%
				height .4rem
				text-align left 
				font-size .3rem
				text-align left
				color #fa436a
    
</style>
